
<template>
  <!-- 盒子将来echarts展示图形图标的节点 -->
  <div class="charts" ref="charts"></div>
</template>

<script setup lang="ts">
import 'echarts-liquidfill'
import { ref, onMounted,  watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useWeatherStore } from '@/stores/weather'
const weatherStore = useWeatherStore()
// / 使用计算属性使'data'具有响应性
const data = computed(() => {
  return [Number(weatherStore?.weatherdata[0]?.humidity) * 0.01]
})
//获取节点
let charts = ref()

onMounted(() => {
  setTimeout(function () {
    // data.value[0]=Number(weatherStore.weatherdata[0].humidity)*0.01
    initmap()
  }, 1000)
})

const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  //设置实例的配置项
  mycharts.setOption({
    //标题组件
    title: {
      text: '今日湿度'
    },
    legend: {
      top: '15%',
      left: 'center'
    },
    //x|y轴组件
    xAxis: {},
    yAxis: {},
    //系列:决定你展示什么样的图形图标
    series: {
      type: 'liquidFill', //系列
      data: data.value, //展示的数据
      waveAnimation: true, //动画
      animationDuration: 3,
      animationDurationUpdate: 0,
      radius: '80%', //半径
      outline: {
        //外层边框颜色设置
        show: true,
        borderDistance: 5,
        itemStyle: {
          color: 'skyblue',
          borderColor: '#294D99',
          borderWidth: 8,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
      }
    },
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  })
}

watch(
  data,
  () => {
    initmap()
  },
  {
    deep: true
  }
)
</script>

<style scoped>
.charts {
  width: 100%;
  height: 200px;
}
</style>
